<template>
	<view class="view-contain">
		<public-module leftIcon="arrow-left" :title="title" />
		<mescroll-uni :height="`${height}px`" :down="downOption" :up="upOption" @init="mescrollInit"
			@down="downCallback" @up="upCallback">
			<view class="province-item" v-for="item in papersList" :key="item.id">
				<view class="sjmc" @click="navigateToDetail(item)">{{ item.name }}</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		categoryYear
	} from "@/config/api.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				title: '所有年份',
				height: 0,
				category: '',
				papersList: [],
				downOption: {
					use: true
				},
				upOption: {
					textNoMore: '一不小心被你看完啦~',
					toTop: {
						right: '24rpx',
						bottom: '60rpx'
					}
				}
			}
		},
		computed: {
			...mapState(['user'])
		},
		onLoad(option) {
			const {
				category
			} = option;
			this.category = category,
				console.log("当前用户查看省份" + this.category);
		},
		onShow() {
			const res = uni.getWindowInfo()
			this.height = res.windowHeight - 44 // 44px为公共顶部导航栏标准高度
			if (this.mescroll) {
				this.mescroll.resetUpScroll()
			}
		},
		methods: {
			...mapMutations(['emptyUserInfo']),
			async upCallback(page) {
				try {
					const res = await categoryYear(
						`?category=${this.category}&pageNum=${page.num}&pageSize=20`);
					if (res) {
						this.mescroll.endBySize(res.rows?.length || 0, res.total);
						if (page.num == 1) {
							this.papersList = []
						}
						this.papersList = Object.freeze(this.papersList.concat(res.rows));
					}
				} catch (error) {
					//联网失败, 结束加载
					this.mescroll.endErr();
				}
			},
			navigateToDetail(item) {
				if (!this.user.userId) {
					// 静默登录机制，直接跳转到首页
					uni.reLaunch({
						url: '/pages/index/index'
					});
					return;
				}
				console.log("当前试卷ID" + item.id)
				uni.navigateTo({
					url: `/pages/papers/components/detail?id=${item.id}`
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.view-contain {
		display: flex;
		flex-direction: column;
		background-color: #F5F6F5;
		min-height: 100vh;
	}

	.welcome-message {
		margin-bottom: 20px;
		font-size: 18px;
		color: #333;
	}

	.province-list {
		width: 100%;
	}

	.province-item {
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 12px;
		margin-bottom: 15px;
		border-radius: 5px;
	}

	.arrow {
		font-size: 18px;
		color: #333;
	}

	.review-item {
		width: calc(100vw - 48rpx);
		margin: 12rpx 24rpx 12rpx;
		padding: 24rpx;
		background-color: #FFF;
		border-radius: 32rpx;

		.zexq {
			margin: 36rpx 0;
			min-width: 480rpx;
			font-size: 24rpx;
			font-weight: normal;
			color: #000;

			.item {
				margin-right: 16rpx;
				padding: 2rpx 4rpx;
				border: 1rpx solid #ccc;
			}
		}

		.btn-detail {
			border-radius: 12rpx;
			font-size: 28rpx;
			padding: 0 12rpx;
			color: #409EFF;
			border: 1rpx solid #409EFF;
		}
	}

	.sjmc {
		// 水平居中
		text-align: center;
		// 开启flex布局
		display: flex;
		// 垂直居中
		align-items: center;
		// 水平居中
		justify-content: center;
	}
</style>